<template>
  <div class="page-operate ele-detail">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>

    <div class="page-head">
      <span class="operate-text">{{title}}</span>
      <div class="operate-box">
        <button @click="back()">关闭</button>
      </div>
    </div>
    <div class="content-area content-detail">
      <!--tab切换   start-->
      <tab ref="eletabchage" @on-change="changeTab"></tab>
      <!--tab切换   end-->
      <!--tab切换(down)  start-->
      <div class="tab-down">
        <ul class="ul-box" v-show="activeTab === 0">
          <li class="table-box">
            <h3><i></i>设备登记信息填写内容</h3>
            <table class='top-table'>
              <tbody>
              <tr>
                <td class="td-fixed" rowspan="7">
                  <div class="pic">
                    <img src="../../../../../static/img/eleAdd/lift.jpg" alt=""/>
                  </div>
                </td>
                <td class="name">注册登记机构名称</td>
                <td>{{eleData.registerUnit}}</td>
                <td class="name">注册登记单位编码</td>
                <td>{{eleData.registerUnitCode}}</td>
              </tr>
              <tr>
                <td class="name">电梯注册码</td>
                <td>{{eleData.registerCode}}</td>
                <td class="name">地址信息</td>
                <td>{{eleData.address}}</td>
              </tr>
              <tr>
                <td class="name">小区名称</td>
                <td>{{eleData.housingEstate}}</td>
                <td class="name">电梯详细地址</td>
                <td>{{eleData.entrance}}</td>
              </tr>
              <tr>
                <td class="name">电梯检验机构名称</td>

                <td>{{eleData.registerCheckUnit}}</td>
                <td class="name">注册登记日期</td>

                <td>{{eleData.registerCreateDate}}</td>
              </tr>
              <tr>
                <td class="name">注册牌照编号</td>
                <td>{{eleData.registerLicenceCode}}</td>
                <td class="name">单位内部编号</td>
                <td>{{eleData.usingInnerCode}}</td>
              </tr>
              <tr>
                <!--<td class="name">厂车拍照编号</td>-->
                <!--<td>{{eleData.madeProductedNo}}</td>-->
                <td class="name">注册登记人员</td>
                <td>{{eleData.registerUser}}</td>
                <td class="name">操作人员</td>
                <td colspan="3">{{eleData.registerOperationUser}}</td>
              </tr>
              </tbody>
            </table>
          </li>
          <li class="table-box">
            <h3><i></i>设备参数信息</h3>
            <table class='top-table'>
              <tr>
                <td class="name">电梯名称</td>
                <td>{{eleData.argsName}}</td>
                <td class="name">电梯类型</td>
                <td>{{eleData.argsTypeText}}</td>
              </tr>
              <tr>
                <td class="name">电梯站数</td>
                <td>{{eleData.argsStation}}</td>
                <td class="name">电梯层数</td>
                <td>{{eleData.argsFloor}}</td>
              </tr>
              <tr>
                <td class="name">电梯额定速度</td>
                <td>{{eleData.argsRatedSpeed}}</td>
                <td class="name">电梯门数</td>
                <td>{{eleData.argsDoor}}</td>
              </tr>
              <tr>
                <td class="name">电梯品牌</td>
                <td>{{eleData.argsBrand}}</td>
                <td class="name">电梯设备编号</td>
                <td>{{eleData.argsSbNo}}</td>
              </tr>
              <tr>
                <td class="name">载重量（kg）</td>
                <td>{{eleData.argsLoadCapacity}}</td>
                <td class="name">电梯型号</td>
                <td>{{eleData.argsModel}}</td>
              </tr>
              <tr>
                <td class="name">覆盖网络</td>
                <td>{{eleData.argsOverlay}}</td>
                <td class="name">控制方式</td>
                <td>{{eleData.argsControllType}}</td>
              </tr>
            </table>
          </li>
        </ul>
        <!--02 start-->
        <ul class="ul-box" v-show="activeTab === 1">
          <li class="table-box">
            <h3><i></i>使用单位信息</h3>
            <table class='top-table'>
              <tbody>
              <tr>
                <td class="name">使用单位名称</td>
                <td>{{eleData.usingName}}</td>
                <td class="name">产权单位</td>
                <td>{{eleData.productedUnit}}</td>
              </tr>
              <tr>
                <td class="name">使用单位代码</td>
                <td>{{eleData.usingCode}}</td>
                <td class="name">产权单位代码</td>
                <td>{{eleData.productedUnitCode}}</td>
              </tr>
              <tr>
                <td class="name">内部编码</td>
                <td>{{eleData.usingInnerCode}}</td>
                <td class="name">产权单位地址</td>
                <td>{{eleData.productedUnitAddress}}</td>
              </tr>
              <tr>
                <td class="name">使用单位地址</td>
                <td>{{eleData.usingUnitAddress}}</td>
                <td class="name">产权管理负责人</td>
                <td>{{eleData.productedManagerLeader}}</td>
              </tr>
              <tr>
                <td class="name">管理负责人电话</td>
                <td>{{eleData.productedManagerLeaderTel}}</td>
                <td class="name">安全管理人员</td>
                <td>{{eleData.usingSafeManager}}</td>
              </tr>
              <tr>
                <td class="name">联系电话</td>
                <td>{{eleData.installTel}}</td>
                <td class="name">安全管理人员手机</td>
                <td>{{eleData.usingSafeManagerTel}}</td>
              </tr>
              <tr>
                <td class="name">安全管理部门名称</td>
                <td colspan="3">{{eleData.usingSafeDepart}}</td>
              </tr>
              </tbody>
            </table>
          </li>
          <li class="table-box">
            <h3><i></i>设备维保信息</h3>
            <table class='top-table'>
              <tr>
                <td class="name">维保类型</td>
                <td>{{eleData.maintenanceType}}</td>
                <td class="name">维保单位名称</td>
                <td>{{eleData.maintenanceUnit}}</td>
              </tr>
              <tr>
                <td class="name">电梯投入使用日期</td>
                <td>{{eleData.usingDate}}</td>
                <td class="name">维保单位代码</td>
                <td>{{eleData.maintenanceUnitCode}}</td>
              </tr>
              <tr>
                <td class="name">维保周期(周)</td>
                <td>{{eleData.maintenanceCycle}}</td>
                <td class="name">资格证书编号</td>
                <td>{{eleData.installCertificateNo}}</td>
              </tr>
              <tr>
                <td class="name">大修周期(周)</td>
                <td>{{eleData.maintenanceRepairCycle}}</td>
                <td class="name">维保人员</td>
                <td>{{eleData.maintenancePerson}}</td>
              </tr>
              <tr>
                <td class="name">最近一次大修日期</td>
                <td>{{eleData.maintenanceRepairDate}}</td>
                <td class="name">维保联系方式</td>
                <td>{{eleData.maintenanceTel}}</td>
              </tr>
            </table>
          </li>
        </ul>
        <!--02 end-->
        <!--03 start-->
        <ul class="ul-box" v-show="activeTab === 2">
          <li class="table-box">
            <h3><i></i>设计制作信息</h3>
            <table class='top-table'>
              <tr>
                <td class="name">设计单位名称</td>
                <td>{{eleData.designUnit}}</td>
                <td class="name">设计单位代码</td>
                <td>{{eleData.designCode}}</td>
              </tr>
              <tr>
                <td class="name">制造单位名称</td>
                <td>{{eleData.madeUnit}}</td>
                <td class="name">制造单位代码</td>
                <td>{{eleData.madeCode}}</td>
              </tr>
              <tr>
                <td class="name">资格证书编码</td>
                <td>{{eleData.maintenanceCertificateNo}}</td>
                <td class="name">制造许可证编号</td>
                <td>{{eleData.madeCertificateNo}}</td>
              </tr>
              <tr>
                <td class="name">制造日期</td>
                <td>{{eleData.madeDate}}</td>
                <td class="name">出厂编号</td>
                <td>{{eleData.madeProductedNo}}</td>
              </tr>
              <tr>
                <td class="name">制造联系电话</td>
                <td>{{eleData.madeTel}}</td>
                <td class="name">设计单位联系电话</td>
                <td>{{eleData.designTel}}</td>
              </tr>
            </table>
          </li>
          <li class="table-box">
            <h3><i></i>设备安装信息</h3>
            <table class='top-table'>
              <tr>
                <td class="name">年检日期</td>
                <td>{{eleData.installCheckDate}}</td>
                <td class="name">初检日期</td>
                <td>{{eleData.installCheckNextDate}}</td>
              </tr>
              <tr>
                <td class="name">电梯安装单位名称</td>
                <td>{{eleData.installUnit}}</td>
                <td class="name">安装单位编码</td>
                <td>{{eleData.installCode}}</td>
              </tr>
              <tr>
                <td class="name">开始施工日期</td>
                <td>{{eleData.installBuildStartDate}}</td>
                <td class="name">安装单位项目负责人</td>
                <td>{{eleData.installProjectLeader}}</td>
              </tr>
              <tr>
                <td class="name">土建验收单位</td>
                <td>{{eleData.installAcceptUnit}}</td>
                <td class="name">安装单位联系电话</td>
                <td>{{eleData.installTel}}</td>
              </tr>
              <tr>
                <td class="name">竣工验收日期</td>
                <td>{{eleData.installCompleteAccpetDate}}</td>
                <td class="name">土建施工单位</td>
                <td>{{eleData.installBuildUnit}}</td>
              </tr>
              <tr>
                <td class="name">竣工检验机构</td>
                <td>{{eleData.installCheckUnit}}</td>
                <td class="name">检查验收报告编号</td>
                <td>{{eleData.installCheckReportNo}}</td>
              </tr>
              <tr>
                <td class="name">登记表编号</td>
                <td>{{eleData.installRegisterNo}}</td>
                <td class="name">检验类别名称</td>
                <td>{{eleData.installCheckTypeName}}</td>
              </tr>
              <tr>
                <td class="name">检验结论名称</td>
                <td>{{eleData.installCheckResultName}}</td>
                <td class="name">备注</td>
                <td>{{eleData.installRemark}}</td>
              </tr>
            </table>
          </li>
        </ul>
        <!--03 end-->
        <!--04 start-->
        <ul class="ul-box" v-show="activeTab === 3">
          <li class="table-box">
            <h3><i></i>巡检保险信息</h3>
            <table class='top-table'>
              <tr>
                <td class="name">巡检单位编码</td>
                <td>{{eleData.prtrolUnitCode}}</td>
                <td class="name">保险单位编码</td>
                <td>{{eleData.insuranceCode}}</td>
              </tr>
              <tr>
                <td class="name">合同编码</td>
                <td colspan="3">{{eleData.insuranceContract}}</td>
              </tr>
            </table>
          </li>
        </ul>
        <!--04 end-->
        <!--05 start-->
        <!-- 单个电梯相关历史记录 -->
        <ul class="ul-box ele-one-search" v-show="activeTab === 4">
          <li class="table-box">
            <ul class="search-select-head">
              <li :class="oneSearchSelect === item.type ? 'select' : ''" @click="selectSearchByType(item.type)"
                  v-for="(item,index) in recordList">
                {{item.text}}
              </li>
            </ul>
            <div style="border: solid 1px #DEE4EA;border-top: none;">
              <DataTable :childLoad="parentLoad" v-show="isshowOneTable" :dataTableObj="dataTableObj"
                         v-on:getPageNo="searchByPageNo" v-on:getPageSize="searchByPageSize">
                <el-table-column fixed="right" align="center" label="操作" width="150">
                  <template slot-scope="scope">
                    <div class="item-route">
                      <div v-if="oneSearchSelect === 0" class="item-route-link"
                           @click="$goRoute('/manage/maintainMgr/maintainHistorty/maintainHistoryCheck?id='+ scope.row.id);">
                        查看详情
                      </div>
                      <div v-show="oneSearchSelect === 1" class="item-route-link"
                           @click="$goRoute('/manage/faultMgr/serviceLists/serviceDetail?id='+ scope.row.id);">
                        查看详情
                      </div>
                      <div v-show="oneSearchSelect === 2" class="item-route-link"
                           @click="$goRoute('/manage/examineMgr/examineHistory/examineHistoryDetail?code='+ scope.row.billsn);">
                        查看详情
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </DataTable>
            </div>
          </li>
        </ul>
        <!--05 end-->
        <!--06 start-->
        <ul class="ul-box" v-show="activeTab === 5">
          <li class="table-box table-none">
            <i class="i-dev"></i>
            <p>此功能还在开发中....</p>
          </li>
        </ul>
        <!--06 end-->
      </div>
      <!--tab切换(down)  end-->
    </div>
  </div>
</template>
<script>
  import tab from '../../../../components/tab/tab'    // tab组件引用
  import DataTable from "../../../../components/dataTable/dataTable"  // table(表格数据引用)
  import HeadTop from "../../../../components/head-top/head-top"
  import moment from 'moment'
  import {getEleDetail, getEleDetailHistory, getEleType} from '@/api/getData'

  import com from '../../../../js/common'
  import {MaintainType} from '../../../../js/constant'

  export default {
    name: 'warnDetail',
    components: {
      tab,
      DataTable,
      HeadTop
    },
    data() {
      return {
        parentLoad: '加载中...',    // 加载状态
        title: "查看详情",
        pagePower: JSON.parse(com.getStore('pagePowers'))['002001001'] ? JSON.parse(com.getStore('pagePowers'))['002001001'] : {},
        activeTab: 0,
        recordTab: 0,
        hover: 0,
        recordList: [ // 电梯记录列表
          {
            text: '维保历史',
            code: '002001001001',
            type: 0,
          },
          {
            text: '维修历史',
            code: '002001001002',
            type: 1,
          },
          {
            text: '巡检历史',
            code: '002001001003',
            type: 2,
          }
        ],
        oneSearchSelect: 0,
        // 页面数据
        eleData: {},
        //  111:表格组件数据
        dataTableObj: {
          isHideStatus: true,
          // 表格数据
          tableData: [],
          // 表格标题
          tableColumns: [],
          // 翻页的数据
          pageObj: {
            // 每页分为几条数据
            pageSize: 10,
            // 总共多少数据
            pageNum: 0,
            pageNo: 1,

            searchStatus: 2,
          }
        },
        // 不同表格查询时的不同请求
        tableSearchUrl: [],
        // 不同表格字段头部
        tableHeader: [
          [
            {
              text: '序号',
              width: '60',
              attributeName: 'index'
            },

            {
              text: '维保类型',
              width: '120',
              attributeName: 'text.maintainTypeName'
            },
            {
              text: '维保单位',
              width: '120',
              attributeName: 'text.depName'
            },
            {
              text: '维保责任人',
              width: '120',
              attributeName: 'text.maintainUserName'
            },
            {
              text: '创建时间',
              width: '120',
              attributeName: 'text.createDate'
            },
            {
              text: '完成时间',
              width: '120',
              attributeName: 'text.planDate'
            }
          ],
          [
            {
              text: '序号',
              width: '60',
              attributeName: 'index'
            },
            {
              text: '维修责任人',
              width: '100',
              attributeName: 'text.repUserName'
            },
            {
              text: '故障来源',
              width: '100',
              attributeName: 'text.troubleFrom'
            },

            {
              text: '创建时间',
              width: '150',
              attributeName: 'text.createDate'
            },
            {
              text: '完成时间',
              width: '150',
              attributeName: 'text.repEndDate'
            }
          ],
          [
            {
              text: '序号',
              width: '60',
              attributeName: 'index'
            },
            {
              text: '巡检发起人',
              width: '80',
              attributeName: 'text.updateUserName'
            },
            {
              text: '巡检类型',
              width: '100',
              attributeName: 'text.patrolTypeId'
            },
            {
              text: '巡检人员',
              width: '80',
              attributeName: 'text.adminName'
            },
            {
              text: '开始时间',
              width: '100',
              attributeName: 'text.createDate'
            },
            {
              text: '完成时间',
              width: '100',
              attributeName: 'text.endDate'
            }
          ]
        ],
        isshowOneTable: true,
        // 临时存储电梯类型数据
        argsTypeIdArr: [],
        moment: moment
      }
    },
    created() {
      this.registerCode = this.$route.query.registerCode;
      // 三个历史数据进行显示(权限判断)
      this.recordList = this.recordList.filter((v) => {
        if (JSON.parse(com.getStore('pagePowers'))['002001001'][v.code]) {
          return v
        }
      })
      // 如果存在一个,则查询第一个
      if (this.recordList.length > 0) {
        this.oneSearchSelect = this.recordList[0].type
        // 获取单个电梯历史数据
        this.searchTableContent(this.oneSearchSelect)
      }
      this.getTypeData(() => {
        // 获取电梯信息
        this.getEleData()
      })
    },
    mounted(){
      if(this.$route.query.from === 'chooseEle'){
        this.registerCode = this.$route.query.registerCode;
        this.$refs.eletabchage.navChange(4);
        this.activeIndex = 4;
      }
    },
    methods: {

      // 电梯类型接口
      getTypeData(cb) {
        getEleType({}).then((data) => {
          this.argsTypeIdArr = data.data.data
          cb()
        }).catch((data) => {
          this.$message.error('电梯类型获取异常')
        })
      },

      // 查询电梯的三项历史数据
      selectSearchByType(index) {
        // 此处进行判断切换
        this.oneSearchSelect = index
        this.isshowOneTable = false
        this.isshowOneTable = true
        this.dataTableObj.pageObj.pageNo = 1
        this.dataTableObj.pageObj.pageSize = 10
        this.searchTableContent(index)
      },

      // 搜索表格数据
      searchTableContent(type) {
        this.dataTableObj.tableColumns = this.tableHeader[type]
        const obj = {
          pageNo: this.dataTableObj.pageObj.pageNo,
          pageSize: this.dataTableObj.pageObj.pageSize,
          condition: {
            elevatorCode: this.registerCode,
            type: type + 1
          }
        }
        getEleDetailHistory(obj).then((data) => {
          let info = data.data.data
          let infoArr = info.data
          if (infoArr.length > 0) {
            infoArr.forEach((i, t) => {
              i.index = (t + 1) + this.dataTableObj.pageObj.pageSize * (this.dataTableObj.pageObj.pageNo - 1)
              i.text = JSON.parse(i.text)
              console.log(i.madeProductedNo)
              if (type === 0) {
                i.text.createDate = i.text.createDate ? moment.unix(i.text.createDate / 1000).format('YYYY-MM-DD') : i.text.createDate
                i.text.planDate = i.text.planDate ? moment.unix(i.text.planDate / 1000).format('YYYY-MM-DD') : i.text.planDate
              } else if (type === 1) {
                i.text.createDate = i.text.createDate ? moment.unix(i.text.createDate / 1000).format('YYYY-MM-DD') : i.text.createDate
                i.text.repEndDate = i.text.repEndDate ? moment.unix(i.text.repEndDate / 1000).format('YYYY-MM-DD') : i.text.repEndDate
              } else {
                i.text.createDate = i.text.createDate ? moment.unix(i.text.createDate / 1000).format('YYYY-MM-DD') : i.text.createDate
                i.text.endDate = i.text.endDate ? moment.unix(i.text.endDate / 1000).format('YYYY-MM-DD') : i.text.endDate
              }
            });
          } else {
            this.parentLoad = '暂无数据'    // loading(暂无数据)
          }
          this.dataTableObj.tableData = infoArr
          this.dataTableObj.pageObj.pageNum = info.totalRecord
        }).catch((data) => {
          this.$message.error(data.data.message)
          this.parentLoad = data.data.message    // loading(查询失败)
        })
      },
      anyDataType1(arr) {
        arr.forEach((i, t) => {
          i.index = (t + 1) + this.dataTableObj.pageObj.pageSize * (this.dataTableObj.pageObj.pageNo - 1)
          i.text = JSON.parse(i.text)
        });
        return arr
      },
      // 每页多少内容
      searchByPageSize(val) {
        this.dataTableObj.pageObj.pageSize = val
        this.searchTableContent(this.oneSearchSelect) // 翻页方法
      },
      // 切换第几页
      searchByPageNo(val) {
        this.dataTableObj.pageObj.pageNo = val
        this.searchTableContent(this.oneSearchSelect) // 翻页方法
      },
      // 获取电梯详情数据
      getEleData() {
        getEleDetail({
          registerCode: this.registerCode
        }).then((data) => {
          const curData = data.data.data
          this.eleData = Object.assign(curData.baseInfo, curData.extensionInfo)
          MaintainType.forEach((v) => {
            if (v.value == this.eleData.maintenanceType) {
              this.eleData.maintenanceType = v.label
            }
          })
          this.argsTypeIdArr.map((v) => {
            if (v.id === this.eleData.argsTypeId) {
              this.eleData.argsTypeText = v.name
            }
          })
          // 时间格式转换
          this.resolveDateData()
        }).catch((data) => {
          this.$message.error(data.data.message)
        })
      },
      // 解析时间格式代码
      resolveDateData() {
        const eleData = this.eleData

        if (eleData.registerCreateDate) {
          eleData.registerCreateDate = moment(eleData.registerCreateDate).format('YYYY-MM-DD')
        }
        if (eleData.maintenanceRepairDate) {
          eleData.maintenanceRepairDate = moment(eleData.maintenanceRepairDate).format('YYYY-MM-DD')
        }
        if (eleData.usingDate) {
          eleData.usingDate = moment(eleData.usingDate).format('YYYY-MM-DD')
        }
        if (eleData.madeDate) {
          eleData.madeDate = moment(eleData.madeDate).format('YYYY-MM-DD')
        }
        if (eleData.installCheckDate) {
          eleData.installCheckDate = moment(eleData.installCheckDate).format('YYYY-MM-DD')
        }
        if (eleData.installCheckNextDate) {
          eleData.installCheckNextDate = moment(eleData.installCheckNextDate).format('YYYY-MM-DD')
        }
        if (eleData.installBuildStartDate) {
          eleData.installBuildStartDate = moment(eleData.installBuildStartDate).format('YYYY-MM-DD')
        }
        if (eleData.installCompleteAccpetDate) {
          eleData.installCompleteAccpetDate = moment(eleData.installCompleteAccpetDate).format('YYYY-MM-DD')
        }
      },
      // 头部导航修改
      changeTab(index) {
        this.activeTab = index;
      },
      back() {
        this.$router.go(-1);
      }
    }
  }
</script>

<style lang="scss" type="text/scss">
  @import '../../../../style/entry/components/tabDetail';
  @import '../../../../style/entry/components/pageChildCommon';
  @import '../../../../style/entry/page/eleDetail';
</style>
